<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="nav-box flexWrap">
					<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==1}" @tap="changeNav(1)">
						<text>进行中</text>
						<text class="nav-line"></text>
					</view>
					<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==0}" @tap="changeNav(0)">
						<text>未开始</text>
						<text class="nav-line"></text>
					</view>
					<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==2}" @tap="changeNav(2)">
						<text>已结束</text>
						<text class="nav-line"></text>
					</view>
				</view>
				<view class="task-box">
					<view class="task-item flexWrapNo" v-for="(item,index) in taskList" :key="index">
						<image src="../../static/home/task-success.png" class="task-icon" v-if="item.progress=='100%'"></image>
						<image src="../../static/home/task-icon.png" class="task-icon" v-else></image>
						<view class="task-cont">
							<view class="task-top flexWrap">
								<view class="task-title">[{{item.task_name}}]</view>
								<view v-if="item.task_type==1">{{item.time_len}}/{{item.task_target}}</view>
								<view v-else>当前排名:{{item.ranking}}</view>
							</view>
							<view class="progress-box">
								<view class="progress-child" :style="{width:item.progress}"></view>
							</view>
							<view class="task-text">{{item.task_desc}} <text v-if="item.task_type==2">(统计截止:{{item.end_date}})</text> </view>
						</view>
					</view>
					<view class="empty-box flexWarpCenterColumn" v-if="showEmpty">
						<image src="/static/order/emptyBg.png" class="empty-image"></image>
						<view class="empty-tips">暂无任务</view>
					</view>
					<uni-load-more v-if="showLoadStatus" :status="status" :size="14" :content-text="contentText" />
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				pageOpc:0,
				navList:["未开始","进行中","已结束"],
				currmentIndex:1,
				taskList:[],
				//下拉刷新
				page: 1,
				size: 10,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',
			}
		},
		onLoad() {
			this.getData();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onPullDownRefresh: function() {
			this.freshList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		// 触底刷新
		onReachBottom() {
			if (this.more) {
				this.getData()
			}
		},
		methods: {
			changeNav(index){
				this.currmentIndex=index
				this.freshList();
			},
			// 刷新列表
			freshList() {
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.taskList = []
				this.getData();
			},
			getData() {
				let self = this
				this.$request.post(this.$api.taskList, {
					page: this.page++,
					num: this.size,
					status:this.currmentIndex,
					store_id:uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						let newArray = data.data
						if(newArray.length!=0){
							for (let i in newArray) {
								if(newArray[i].task_type==1){
									newArray[i].progress = Number(newArray[i].time_len)/newArray[i].task_target*100+'%'
								}else{
									newArray[i].progress = Number(newArray[i].ranking)/newArray[i].join_num*100+'%'
								}
							}
						}
						if (newArray.length == 0 && self.page == 2) {
							self.showEmpty = true
							self.showLoadStatus = false
							self.more = false // 不能再次请求了
							return false;
						} else {
							self.showLoadStatus = true
							self.more = true
							self.showEmpty = false
							self.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							self.status = 'noMore'
							self.more = false
							self.showEmpty = false
						}
						self.taskList = self.taskList.concat(newArray);
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 18upx 30upx;
	}
	.nav-box{
		padding: 32rpx 110rpx;
		border-bottom: 2rpx solid #36355E;
		.nav-item{
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #82819B;
			.nav-line{
				width: 94rpx;
				height: 4rpx;
				margin-top: 10rpx;
			}
		}
		.active{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.nav-line{
				background: #26BCFD;
			}
		}
	}
	.task-box{
		.task-item{
			margin-top: 30upx;
			align-items: start;
			.task-icon{
				width: 116upx;
				height: 116upx;
				flex: none;
			}
			.task-cont{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36rpx;
				margin-left: 24rpx;
				padding-top: 14rpx;
				flex: 1;
				.task-top{
					.task-title{
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFB726;
						line-height: 36rpx;
					}
				}
				.progress-box{
					height: 20upx;
					background:#36355E;
					border-radius: 20upx;
					margin: 24rpx 0;
					.progress-child{
						height: 20upx;
						background:#26BCFD;
						border-radius: 20upx;
					}
				}
			}
		}
	}
	.empty-box {
		margin-top: 64upx;
	
		.empty-image {
			width: 400upx;
			height: 400upx;
		}
	
		.empty-tips {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #FFFFFF;
			margin-top: 22upx;
		}
	}
</style>
